<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="./node_modules/mint-ui/lib/style.min.css">
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <div id="app">
        <mt-header>
            <a to="/" slot="left">
                <mt-button icon="back">试卷详情</mt-button>
            </a>
            <mt-button slot="right"></mt-button>
        </mt-header>
        <section >
        <div>
            <!-- 标题 -->
           <div class="title">
               <h4>{{ tests.type}}</h4>  
           </div>
        
               <!-- 注意事项  -->
            <div class='announce'>
                <h5>注意事项</h5>
                <p>1、考试时长：{{tests.totalTime}}分钟</p>
                <p>2、试卷分值：{{tests.totalScore}}分</p>
                <p>3、考察范围：{{tests.name}}</p>
                <p v-if = 'have'>4、{{tests.otherRequire}}</p>
            </div>
               <!-- 表格 -->
               <table>
                   <thead>
                       <td >题号</td>
                       <td>一</td>
                       <td>二</td>
                       <td>三</td>
                       <td>四</td>
                       <td>五</td>
                       <td>六</td>
                       <td>总分</td>
                   </thead>
                   <tr>
                       <td>得分</td>
                       <td> </td>
                       <td> </td>
                       <td> </td>
                       <td> </td>
                       <td> </td>
                       <td> </td>
                       <td> </td>
                   </tr>
               </table>
           
           <!-- 题目区域 -->
            <div class="totalEx" >
                <!-- 大题型 -->
                <div v-for = '(test , index) in tests.contents' class="exType">
                    <h4>{{index+1 | getB}}、{{test.groupType}} ( {{test.groupNum}}题、共{{test.groupNum}}分 )</h4>
                    <div class='mdlEx' v-for = 'mdlEx in test.exerciseShowList'>
                        <div >
                            {{mdlEx.id}}<span v-html = mdlEx.scene></span>
                        </div>
                        <div v-for = 'ex in mdlEx.exerciseDTOList'>
                            <span>{{ex.exerciseID}}.</span>
                            <p v-html = ex.content></p>
                            <div v-for = 'cho in ex.selectionList'>
                                <p>
                                    <span>{{cho.name}}.</span>
                                    <span v-html = cho.content></span>
                                </p>
                            </div>
                            <div class="detail">
                                <span class='detailT'>知识点:</span>
                                <span v-for = 'kn in ex.knowledgeCognizes' > 
                                     {{kn.knowledge}}//
                                </span>
                                <span class='detailT'>学科素养:</span> 
                                <span v-for='kn in ex.scientificLiteracy'>
                                     {{kn}}
                                </span>
                                <span class='detailT'>试题源:</span>
                                <span >
                                     <span v-html = mdlEx.exerciseSource[0]></span>
                                </span>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
        </section>
    </div>
</body>

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/mint-ui/lib/index.js"></script>
<script src='./node_modules/axios/dist/axios.min.js'></script>
<script>
    var vue = new Vue({
        el:'#app',
        data () {
          return {
              tests:{},
              have:false,
              
          }
        },
        created () {
            this.getExercises()
        },
        methods: {           
            getExercises () {
                axios({
                    url:'api/teacher/practice/1',
                    method:'get',
                    headers: {
                        Authorization: 'eyJhbGciOiJIUzI1NiJ9.eyJleHBpcmVBdCI6MTUxMzIxNjg1OTg0MiwiZXhwIjoxNTEzMjE2ODU5LCJ1c2VySWQiOjEwMDM2LCJjcmVhdGVBdCI6MTUxMjYxMjA1OTg0Mn0.DvvKCYAETm06juAStzzKf-uK1IE10PWDQzqWePRWlYY'
                    }
                }).then(res => {
                    // var _this = this
                  
                    this.tests = res.data.data
                    console.log(this.tests)
                    
                }) 
            }
        },
         filters: {
            getB(Num) {
                for (i = Num.length - 1; i >= 0; i--) {
                    Num = Num.replace(" ", "")  //替换Num中的空格
                }
                if (isNaN(Num)) { //验证输入的字符是否为数字
                    //alert("请检查小写金额是否正确");
                    return;
                }
                //字符处理完毕后开始转换，采用前后两部分分别转换
                part = String(Num).split(".");
                newchar = "";
                //小数点前进行转化
                for (i = part[0].length - 1; i >= 0; i--) {
                    if (part[0].length > 10) {
                        //alert("位数过大，无法计算");
                        return "";
                    }//若数量超过拾亿单位，提示
                    tmpnewchar = ""
                    perchar = part[0].charAt(i);
                    switch (perchar) {
                        case "0": tmpnewchar = "零" + tmpnewchar; break;
                        case "1": tmpnewchar = "一" + tmpnewchar; break;
                        case "2": tmpnewchar = "二" + tmpnewchar; break;
                        case "3": tmpnewchar = "三" + tmpnewchar; break;
                        case "4": tmpnewchar = "四" + tmpnewchar; break;
                        case "5": tmpnewchar = "五" + tmpnewchar; break;
                        case "6": tmpnewchar = "六" + tmpnewchar; break;
                        case "7": tmpnewchar = "七" + tmpnewchar; break;
                        case "8": tmpnewchar = "八" + tmpnewchar; break;
                        case "9": tmpnewchar = "九" + tmpnewchar; break;
                    }
                    switch (part[0].length - i - 1) {
                        case 0: tmpnewchar = tmpnewchar; break;
                        case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
                        case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
                        case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
                        case 4: tmpnewchar = tmpnewchar + "万"; break;
                        case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
                        case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
                        case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
                        case 8: tmpnewchar = tmpnewchar + "亿"; break;
                        case 9: tmpnewchar = tmpnewchar + "十"; break;
                    }
                    newchar = tmpnewchar + newchar;
                }
                //替换所有无用汉字，直到没有此类无用的数字为止
                while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
                    newchar = newchar.replace("零亿", "亿");
                    newchar = newchar.replace("亿万", "亿");
                    newchar = newchar.replace("零万", "万");
                    newchar = newchar.replace("零零", "零");
                }
                //替换以“一十”开头的，为“十”
                if (newchar.indexOf("一十") == 0) {
                    newchar = newchar.substr(1);
                }
                //替换以“零”结尾的，为“”
                if (newchar.lastIndexOf("零") == newchar.length - 1) {
                    newchar = newchar.substr(0, newchar.length - 1);
                }
                return newchar;
            }
        }
    })
</script>
<style>
    p {
        line-height: 1.5rem;
    }

    img {
        width: 50%;
        height: 50%;
    }
    .announce {
        margin-top: 1rem;
        line-height: 2rem;
    }
    table {
        margin-top: 1rem;
        width: 80%;
        border: 1px solid #EAEAEA;
        border-collapse:collapse;
    }
    
    td {
       text-align: center; 
       border:1px solid #EAEAEA;
    }
    tr {
        height: 2rem;
    }
    
    .mint-header {
        height: 3rem;
        background-color: #13D3D7;
        font-size: 1rem;
        border-bottom: 0.125rem #EAEAEA solid;
    }

    .mintui-back:before {
        content: "\E600";
        font-size: 1rem;
    }

    section {
        padding: 1.5rem;
        font-size: 0.8rem;
    }

    section .title {
        text-align: center;
    }

    .totalEx {
        margin-top: 1rem;
    }
    .exType {
        margin-bottom: 1rem;
        margin-top: 1rem;
        padding-bottom: 1rem;
        line-height: 2rem;
        border-bottom: 1px solid #CCC;        
    }
    .mdlEx {
    }
    .detailT {
        color:rgb(130, 131, 134);
    }
    .smEx {
        margin-top: 0.5rem;
        font-size: 0.8rem;
    }

    .smEx * {
        margin-bottom: 0.5rem;
    }

    .askAns {
        margin-top: 1rem;
    }

    .getScore {
        color: #D03E3E;
        font-size: 1.5rem;
    }
</style>

</html>